<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="4" :xs="24"
        ><div class="grid-content bg-purple"></div
      ></el-col>
      <el-col :span="20" :xs="24"
        ><el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="用户名称">
            <el-input
              v-model="formInline.userName"
              placeholder="请输入用户名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号码">
            <el-input
              v-model="formInline.phonenumber"
              placeholder="请输入手机号码"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="formInline.status" placeholder="用户状态">
              <el-option label="正常" value="0"></el-option>
              <el-option label="停用" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="formInline.value1"
              @change="changeDateTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          @click="handleDelete"
          >删除</el-button
        >
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column fixed prop="userId" label="用户编号" width="150">
          </el-table-column>
          <el-table-column prop="userName" label="用户名称" width="120">
          </el-table-column>
          <el-tabl  e-column prop="nickName" label="用户昵称" width="120">
          </el-tabl>
          <el-table-column prop="dept.deptName" label="部门" width="120">
          </el-table-column>
          <el-table-column prop="phonenumber" label="手机号" width="300">
          </el-table-column>
          <el-table-column prop="status" label="状态" width="120">
            <template slot-scope="scope">
              {{ scope.row.status }}
              <el-switch
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="120">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >查看</el-button
              >
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table></el-col
      >
    </el-row>
  </div>
</template>

<script>
import { listUser } from "@/api/system/user";
import { delUser } from "../../../api/system/user";
export default {
  components: {},
  props: {},
  data() {
    return {
      scope: "",
      formInline: {
        params: {
          // beginTime: "2024-10-07",
          // endTime: "2024-10-07",
        },
      },
      tableData: [],
    };
  },
  computed: {},
  methods: {
    handleDelete() {
      let userIds = this.multipleSelection.join();
      delUser();
      this.$modal
        .confirm('是否确认删除用户编号为"' + userIds + '"的数据项?')
        .then(function () {
          return delUser(userIds);
        })
        .then(() => {
          this.getListData();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    handleClick(row) {
      console.log(row);
    },
    onSubmit() {
      console.log("onSubmit");
      this.getListData();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val.map((item) => item.userId);
    },
    changeDateTime(value) {
      console.log("每次输出的值", value);
      let beginTime = this.formatDate(value[0]);
      let endTime = this.formatDate(value[1]);
      this.formInline.params.beginTime = beginTime;
      this.formInline.params.endTime = endTime;
    },
    getListData() {
      listUser(this.formInline).then((res) => {
        console.log(res);
        this.tableData = res.rows;
      });
    },
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，加1并填充前导零
      const day = String(date.getDate()).padStart(2, "0"); // 填充前导零
      return `${year}-${month}-${day}`;
    },
  },
  created() {
    this.getListData();
  },
  mounted() {},
};
</script>
<style scoped>
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
